Vue.component('myheader',{
    props:[],
    template:`
    <!--导航栏-->
      <div>
        <nav>
          <ul class="menu">
            <li><a href="#">首页</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Faq</a></li>
            <li style="width: 150px;">
              <div id="search_div">
                <input class="c-checkbox" type="checkbox" id="checkbox">
                <div class="c-formContainer">
                  <form class="c-form" action="">
                    <input class="c-form__input" placeholder="请输入搜索内容" type="text"
                           pattern="[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\\.[A-Za-z]{1,63}$" required>
                    <label class="c-form__buttonLabel" for="checkbox">
                      <button class="c-form__button" type="button">搜索</button>
                    </label>
                    <label class="c-form__toggle" for="checkbox" data-title="Notify me"></label>
                  </form>
                </div>
              </div>
            </li>
            <li><a href="/reg_login.html">登录|注册</a></li>
            <li><a href="/reg_login.html">个人中心</a></li>
          </ul>
        </nav>
      </div>
    `
})

let myheadvm= new Vue({
    el:"myheader",
})